<template>
  <m-page>
    <!-- 长湘贷申请首页 -->
    <m-header title="长湘贷"></m-header>

    <ynet-field>
      <md-input-item ref="input0" title="申请人姓名" placeholder="请输入姓名" v-model="form.name"></md-input-item>
      
      <!-- 申请人类型 -->
      <ynet-field-item
        title=" 申请人类型"
        :content="form.type"
        @click="showSelector1"
        placeholder="请输入申请人类型"
        arrow
        solid
      />
      <md-selector
        v-model="isSelectorShow1"
        default-value
        :data="selectOption1"
        max-height="320px"
        title="申请人类型"
        large-radius
        @choose="onSelectorChoose1"
      ></md-selector>
      <!-- 申请人性别 -->
      <ynet-field-item
        title=" 申请人性别"
        :content="form.sex"
        @click="showSelector2"
        placeholder="请输入申请人性别"
        arrow
        solid
      />
      <md-selector
        v-model="isSelectorShow2"
        default-value
        :data="selectOption2"
        max-height="320px"
        title="申请人性别"
        large-radius
        @choose="onSelectorChoose2"
      ></md-selector>

      <!-- 手机号码 -->
      <md-input-item type="phone" ref="input1" title="手机号码" placeholder="本人常用手机号码" v-model="form.phoneNumber"></md-input-item>
    
      <!-- 所在地区 -->
      <ynet-field-item
      class="areatitle"
        title="所在地区 "
        arrow
        solid
        placeholder="请选择区域"
        :content="form.area"
        @click="isPickerShow1 = true">
      </ynet-field-item>
      <md-picker
      ref="picker1"
      v-model="isPickerShow1"
      :data="pickerData1"
      :cols="3"
      is-cascade
      large-radius
      title="选择省市区/县"
      @confirm="onPickerConfirm()"
    ></md-picker>

    <!-- 输入详细地址 -->
    <md-input-item ref="input2" title="详细地址" placeholder="请输入详细地址" v-model="form.address"></md-input-item>
    <!-- 经营体收入 -->
     <ynet-field-item
        title=" 经营体收入"
        :content="form.income"
        @click="showSelector3"
        placeholder="请选择收入范围"
        arrow
        solid
      />
      <md-selector
        v-model="isSelectorShow3"
        default-value
        :data="selectOption3"
        max-height="320px"
        title="收入范围"
        large-radius
        @choose="onSelectorChoose3"
      ></md-selector>
      <!-- 经营体年份 -->
     <ynet-field-item
        title=" 经营体年份"
        :content="form.age_limit"
        @click="showSelector4"
        placeholder="请选择经营年限范围"
        arrow
        solid
      />
      <md-selector
        v-model="isSelectorShow4"
        default-value
        :data="selectOption4"
        max-height="320px"
        title="经营体年份"
        large-radius
        @choose="onSelectorChoose4"
      ></md-selector>
      <!-- 申请额度 -->
      <md-input-item type="digit" ref="input3" title="申请额度" placeholder="1-100万元之间" v-model="form.quota"></md-input-item>
      <!-- 推荐人 -->
      <md-input-item ref="input4" title="推荐人工号" placeholder="123456" v-model="form.job_number"></md-input-item>
      <!-- 建议或意见 -->
      <md-textarea-item
        v-model="form.suggest"
        ref="textarea1"
        title="建议或意见"
        class="example"
        :autosize="true"
        :rows="1"
        placeholder="建议或意见 不超过200字"
        :max-length='200'
      />
    </ynet-field>

    <ynet-button type="warning" class="apply_btn" @click="handclick">提交申请</ynet-button>
  </m-page>
</template>

<script>
import { Toast ,InputItem, Selector, Picker ,TextareaItem} from "mand-mobile";
import { Button ,Popup ,Field,FieldItem} from "ynet-mobile";
import district from 'mand-mobile/components/picker/demo/data/district'  //区域选择 地区案例
export default {
  components: {
    [Button.name]:Button,
    [FieldItem.name]: FieldItem,
    [Selector.name]: Selector,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [TextareaItem.name]: TextareaItem,
  },
  data() {
    return {
      isSelectorShow1: false,
      isSelectorShow2: false,
      isSelectorShow3: false,
      isSelectorShow4: false,
      isPickerShow1: false,
      //贷款申请表单数据
      form: {        
        name: "",
        type: "",
        sex: "",
        phoneNumber: "",
        area: "",
        address: "",
        income: "",
        age_limit: "",
        quota: "",
        job_number: "",
        suggest: ""
      },
      selectOption1: [
        {
          value: "1",
          text: "企业主"
        },
        {
          value: "2",
          text: "个体户"
        },
        {
          value: "3",
          text: "无业游民"
        }
      ],
      selectOption2: [
        {
          value: "1",
          text: "男"
        },
        {
          value: "2",
          text: "女"
        },
      ],
      selectOption3: [
        {
          value: "1",
          text: "200万以上"
        },
        {
          value: "2",
          text: "100~200万"
        },
        {
          value: "3",
          text: "100万以下"
        },
      ],
      selectOption4: [
        {
          value: "1",
          text: "1年以内"
        },
        {
          value: "2",
          text: "1~5年"
        },
        {
          value: "3",
          text: "5年以上"
        },
      ],
      pickerData1: district,  //区域选择中的地区数据
    };
  },
  methods: {
    showSelector1() {
      this.isSelectorShow1 = true;
    },
    //申请人类型选择框
    onSelectorChoose1({ text }) {
      this.form.type = text;
    },
    showSelector2() {
      this.isSelectorShow2 = true;
    },
    //申请人性别选择框
    onSelectorChoose2({ text }) {
      this.form.sex = text;
    },
     showSelector3() {
      this.isSelectorShow3 = true;
    },
    //选择经营体收入
    onSelectorChoose3({ text }) {
      this.form.income = text;
    },
    showSelector4() {
      this.isSelectorShow4 = true;
    },
    //选择经营体年份
    onSelectorChoose4({ text }) {
      this.form.age_limit = text;
    },
    //地区选择
    onPickerConfirm() {
      const values = this.$refs['picker1'].getColumnValues()

      let res = ''
      values.forEach(value => {
        value && (res += `${value.text || value.label} `)
      })
      this.form.area = res
    },

    //提交按钮
    handclick(){
      console.log(this.form)
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

